<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const goshez = () => {
  router.push("/shez");
};
const gologing = () => {
  router.push("/loging");
};
</script>

<template>
  <div class="waibju">
    <div class="yhtx-xxxinxi">
      <div class="yhtx-txxx">
        <div class="yhtx">
          <img src="../../assets/niming.png" alt="" />
        </div>
        <div class="yhxx">
          <div class="yhmc">吉孙白曹</div>
          <div class="lxfs">134****8144</div>
        </div>
      </div>
      <div class="yhxx-sz">
        <van-icon @click="goshez" name="setting-o" size="20" />
      </div>
    </div>

    <div class="dingdan">
      <div>我的订单</div>
      <van-grid :border="false" :column-num="5" class="ddzt">
        <van-grid-item to="/dzf" icon="todo-list-o" text="待支付" />
        <van-grid-item to="/dkk" icon="todo-list-o" text="待开课" />
        <van-grid-item to="/xxz" icon="todo-list-o" text="学习中" />
        <van-grid-item to="/yjs" icon="todo-list-o" text="已结束" />
        <van-grid-item to="/tksh" icon="todo-list-o" text="售后" />
      </van-grid>

      <div class="ddzt">
        <van-cell to="/wdhd" title="我的活动" is-link icon="gift-o" />
        <van-cell to="/wdyhj" title="我的优惠券" is-link icon="discount" />
        <van-cell to="/wdsc" title="我的收藏" is-link icon="star-o" />
        <van-cell to="/gywm" title="关于我们" is-link icon="manager-o" />
        <van-cell to="/zxzx" title="在线咨询" is-link icon="service" />
      </div>
    </div>

    <div class="anniu">
      <van-button to="/loging"  size="large" type="primary">退出登录</van-button>
    </div>
  </div>
</template>

<style >
.an-grid-item {
  font-size: 10px;
}
.label {
  padding: 10px 20px 0;
  font-size: 20rpx;
  font-weight: 500;
}
.yhtx-xxxinxi {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 10px 5px ;
}

.waibju {
  padding: 0 20px;
}

.yhtx {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: aqua;
  margin-right: 10px;
  overflow: hidden;
}

.yhtx img {
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
}

.yhtx-txxx {
  display: flex;
}

.yhxx {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* align-content: space-between; */
}

.yhmc {
  margin-top: 5px;
}

.yhxx-sz {
  line-height: 45px;
}

.dingdan {
  margin-top: 20px;
}

.ddzt {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 2px 3px;
  box-shadow: -2px -2px 0px 1px #aaa inset;
}

.anniu {
    margin-top: 30px;
    padding: 0 5px;
}


</style>